<template>
  <el-switch style="display: block"  :activeColor="activeColor" :inactiveColor="inactiveColor" 
    :activeText="activeText" :inactiveText="inactiveText" :active-value="activeValue" :inactive-value="inactiveValue" v-show="hasPerms(perms)" @change="handleChange">
  </el-switch>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtSwitch',
  props: {
    activeColor: {  // switch 打开时的背景色	
      type: String,
      default: '#13ce66'
    },
    inactiveColor: {  // switch 关闭时的背景色
      type: String,
      default: '#ff4949'
    },
    activeText: {  // switch 打开时的文字描述	
      type: String,
      default: '开启'
    },
    inactiveText: {  // switch 关闭时的文字描述
      type: String,
      default: '关闭'
    },
    activeValue: {  // switch 打开时的值
      type: String,
      default: 1
    },
    inactiveValue: {  // sswitch 关闭时的值
      type: String,
      default: 0
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    show: {  // 按钮是否展示
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
    }
  },
  methods: {
    handleChange: function () {
      // 按钮操作处理函数
      this.$emit('change', {})
    }, 
    hasPerms: function (perms) {  
      if(this.show == false){
        return this.show
      } 
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>